<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%--@elvariable id="studyRecordList" type="java.util.List"--%>
<%--@elvariable id="studyRecord" type="com.genghis.ptas.study.entity.StudyRecord"--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <%@include file="../../common.jsp" %>
    <!-- BEGIN THEME STYLES -->
    <link href="assets/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/plugins.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/pages/timeline.css" rel="stylesheet" type="text/css"/>
    <link href="assets/css/themes/default.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css"/>

    <script src="<c:url value="/js/common/common.js"/>" type="text/javascript"></script>
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()%><c:url value="/"/>"/>

    <!-- END THEME STYLES -->
    <style type="text/css">
        .page-content {
            margin-left: 0 !important;
        }

        body {
            background-color: white !important;
        }

        ul.page-sidebar-menu > li > a {
            border-top: 1px solid #eae7ff !important;
            color: #ffffff !important;
        }

    </style>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <!-- END CONTAINER -->
        <div class="page-content">
            <!-- BEGIN PAGE CONTENT-->
            <div class="row">
                <div class="col-md-12">
                    <!-- BEGIN PAGE TITLE & BREADCRUMB-->
                    <h3 class="page-title">
                        学习记录
                        <small>我的学习记录</small>
                    </h3>
                    <ul class="page-breadcrumb breadcrumb">
                        <li>
                            <i class="fa fa-home"></i>
                            <a href="javascript:" onclick="top.addTab('public/menu')">
                                首页
                            </a>
                            <i class="fa fa-angle-right"></i>
                        </li>
                        <li>
                            <a href="javascript:"> 我的学习记录 </a>
                        </li>
                        <li class="pull-right">
                            <span id="nowTime"></span>
                        </li>
                    </ul>
                    <!-- END PAGE TITLE & BREADCRUMB-->
                </div>
            </div>
            <div class="row">
                <div id="contentList">
                    <form role="form">
                        <div class="row form-group">
                            <div class="col-md-6" style="margin-left: 60px">
                                <div class="input-group input-large date-picker input-daterange" data-date=""
                                     data-date-format="yyyy-mm-dd">
                                    <input type="text" id="fromDate" value="" placeholder="开始时间"
                                           class="form-control">
                                    <span class="input-group-addon"> to</span>
                                    <input type="text" id="toDate" value="" placeholder="结束时间"
                                           class="form-control">
                                </div>
                            </div>
                            <div class="col-md-4 pull-right" style="margin-right: 15px">
                                <a class="btn green pull-right" onclick="queryStudyRecord()">
                                    查询 <i class="fa fa-search"></i>
                                </a>
                            </div>
                        </div>
                    </form>
                    <ul class="timeline" id="noteList" style="margin-top: 50px">
                        <c:forEach var="studyRecord" items="${studyRecordList}">
                            <li class="timeline-${studyRecord.showColor}" id="note_${studyRecord.id}">
                                <div class="timeline-time">
								<span class="date" style="color: ${studyRecord.showColor};font-size: 15px">
                                        ${studyRecord.date}
                                </span>
                                <span class="time" style="color: ${studyRecord.showColor};">
                                        ${studyRecord.studyDate}
                                </span>
								<span class="time">
                                </span>
                                </div>
                                <div class="timeline-icon">
                                    <i class="fa fa-trophy"></i>
                                </div>
                                <div class="timeline-body">
                                    <h2>
                                            ${studyRecord.courseInfo.courseName}
                                    </h2>

                                    <div class="timeline-content">
                                        <img class="timeline-img pull-left" alt="" src="${studyRecord.courseInfo.photoUrl}">
                                            ${studyRecord.studyRecord}
                                    </div>
                                    <div class="timeline-footer">
                                        <c:if test="${studyRecord.category==3}">
                                            <a href="javascript:"
                                               onclick="watchCourseInfo(${studyRecord.courseId})"
                                               class="nav-link pull-right" style="margin-right: 10px">
                                                学习课件 <i class="m-icon-swapright m-icon-white"></i>
                                            </a>
                                        </c:if>
                                    </div>
                                </div>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>

    </div>
    <!-- END CONTENT -->
</div>

<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script src="assets/scripts/core/app.js"></script>
<script src="ecommerce/plugins/back-to-top.js"></script>

<script>
    jQuery(document).ready(function () {
        // initiate layout and plugins
        App.init();
        if (jQuery().datepicker) {
            $('.date-picker').datepicker({
                rtl: App.isRTL(),
                autoclose: true
            });
            $('body').removeClass("modal-open"); // fix bug when inline picker is used in modal
        }
        parent.browserSizeDeal(6, document.body.clientHeight + 100);
        window.setInterval(setNotePageTime, 1000);
    });

    function setNotePageTime() {
        $("#nowTime").html(top.getNowTime());
    }

    function queryStudyRecord(id) {
        $.ajax({
            url: "note/listAllNote",
            data: {
                noteType: id,
                userId: ${user.id},
                fromDate: $("#fromDate").val(),
                toDate: $("#toDate").val(),
                noteName: $("#noteName").val()
            },
            type: "POST",
            dataType: "json",
            success: function (data) {
                var innerHtml = "";
                for (var i in data) {
                    innerHtml += getInnerHtml(data[i]);
                }
                $("#noteList").html(innerHtml);
                parent.browserSizeDeal(2, document.body.clientHeight - 10);
            },
            error: function () {
            }
        })
    }

    function getInnerHtml(data) {
        var fun = data.state < 0 ? ( '<a href="javascript:" class="nav-link pull-right" onclick="publicNote(' + data.id + ',' + data.noteType + ')" style="margin-right: 10px">' +
                '    申请公示 <i class="fa fa-share"></i>' +
                '</a>' ) : ( '<a href="javascript:" class="nav-link pull-right" onclick="noPublicNote(' + data.id + ',' + data.noteType + ')" style="margin-right: 10px">' +
                '    取消公示 <i class="fa fa-share"></i>' +
                '</a>'
                );

        var state = data.state == 1 ? '已公示笔记' : data.state == 0 ? '未审核笔记' : data.state == 2 ? '笔记公示失败' : '未申请公示笔记';

        return  '<li class="timeline-' + data.showColor + '">'
                + '    <div class="timeline-time">'
                + '        <span class="date" style="font-size: 15px ;color: ' + data.showColor + ';">' + data.createDate + '</span>'
                + '        <span class="time">' + '</span>'
                + '    </div>'
                + '    <div class="timeline-icon">'
                + '        <i class="fa fa-trophy"></i>'
                + '    </div>'
                + '    <div class="timeline-body">'
                + '        <h2>' + data.noteName + '(' + state + ')' + '</h2>'
                + '        <div class="timeline-content">'
                + '            ' + data.noteContent
                + '        </div>'
                + '        <div class="timeline-footer">'
                + '            <a href="javascript:" class="nav-link pull-right" onclick="delNote(' + data.id + ',' + data.noteType + ')" style="margin-right: 10px">'
                + '                删除<i class="fa fa-minus"></i>'
                + '            </a>'
                + '            <a href="javascript:" class="nav-link pull-right" onclick="editNote(' + data.id + ')" style="margin-right: 10px">'
                + '                编辑<i class="fa fa-edit"></i>'
                + '            </a>'
                + fun
                + '        </div>'
                + '    </div>'
                + '</li>';
    }

    function watchCourseInfo(courseId) {
        location.href = basePath + "course/courseInfoDo?id=" + courseId;
    }
</script>
<!-- END JAVA_SCRIPTS -->
</body>
<!-- END BODY -->
</html>